<template>
	<div>
		<el-form :inline="true">
			<el-form-item>
				<el-input v-model="query" placeholder="审批人">
					<template slot="append">
						<el-button
							type="primary"
							@click="onSubmit"
							icon="el-icon-search"
						></el-button>
					</template>
				</el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onAddUser">添加用户</el-button>
			</el-form-item>
		</el-form>

		<!-- 打开弹出层 -->
		<ComLog
			type="add"
			title="添加用户"
			:form.sync="form"
			@enterChange="enterChange"
			:dialogFormVisible.sync="dialogFormVisible"
		></ComLog>
	</div>
</template>

<script>
import { addUser } from '@/api/users'
export default {
	data() {
		return {
			dialogFormVisible: false,
			query: '',
			form: { username: '', password: '', email: '', mobile: '' },
		}
	},
	methods: {
		onSubmit() {
			// 前端基础校验
			// 通过后给父级
			this.$emit('query', this.query)
			this.query = ''
		},
		onAddUser() {
			this.dialogFormVisible = true
		},
		enterChange(data) {
			addUser(data).then(({ data }) => {
				this.dialogFormVisible = false
				this.$emit('refresh')
			})
		},
	},
	components: {
		ComLog: () => import('./ComLog.vue'),
	},
}
</script>

<style>
</style>